<!-- 企业管理-银行账户 -->
<template>
  <div class="bankAccount">
    <!-- 表单 -->
    <div class="bankForm">
      <div class="bankSearch">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="开户银行">
            <el-input
              v-model="formInline.user"
              placeholder="请输入关键词"
              style="width: 415px; height: 32px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="onSubmit"
              class="search"
              style="background: #0058ff"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="addBtn">
        <el-button type="primary" icon="el-icon-plus" style="background: #0058ff;margin:0 40px 20px 0;">新增账户</el-button>
      </div>
    </div>

    <!-- 图 -->
    <div class="bankImg">
      <div class="titleImg">
        <div
          style="
            width: 3px;
            height: 18px;
            background-color: #0058ff;
            margin: 20px;
          "
        ></div>
        <div class="titleText">对公认证账户</div>
      </div>
      <div class="bankCard">
        <div class="bankName">
          <span>中国工商银行</span>
          <img src="../../../assets//sxyrImage/矩形.png" alt="" />
        </div>
        <div class="cardNumber">623100483738294731</div>
        <div class="cardAddress">
          <span>招商银行北京海淀支行</span>
          <span>编辑</span>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="bankList">
      <div class="titleImg">
        <div
          style="
            width: 3px;
            height: 18px;
            background-color: #0058ff;
            margin: 20px;
          "
        ></div>
        <div class="titleText">企业银行账户</div>
      </div>
      <div class="bankTable">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="serial"
            label="序号"
            width="180"
          ></el-table-column>
          <el-table-column prop="deposit" label="开户银行"></el-table-column>
          <el-table-column prop="location" label="开户所在地"></el-table-column>
          <el-table-column prop="account" label="银行账号"></el-table-column>
          <el-table-column prop="branch" label="开户支行"></el-table-column>
          <el-table-column
            prop="largeAmount"
            label="大额行号"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >编辑</el-button
              >
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bankPagination">显示第 1 到第 2 条记录，总共 2 条记录</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      tableData: [
        {
          serial: "1",
          deposit: "招商银行",
          location: "北京市朝阳区",
          account: "6225880109301680",
          branch: "招商银行北京海淀支行",
          largeAmount: "1234567890123",
        },
        {
          serial: "2",
          deposit: "招商银行",
          location: "北京市朝阳区",
          account: "6225880109301680",
          branch: "招商银行北京海淀支行",
          largeAmount: "1234567890123",
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style scoped>
.bankAccount {
  width: 100%;
  height: 100%;
  margin: 10px 0px 10px 0px;
  background: #f1f3f7;
}

.bankForm {
  width: 98%;
  height: 112px;
  margin: 16px;
  background: #ffffff;
  border: 1px solid rgba(1, 24, 70, 0.3);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 0 40px;
}

.bankImg {
  width: 98%;
  height: 342px;
  margin: 16px;
  background: #ffffff;
  border: 1px solid rgba(1, 24, 70, 0.3);
  border-radius: 6px;
}

.bankList {
  width: 98%;
  margin: 16px;
  background: #ffffff;
  border: 1px solid rgba(1, 24, 70, 0.3);
  border-radius: 6px;
}

.titleText {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  color: #333333;
  margin: -42px 0 0 30px;
}

.bankCard {
  width: 370px;
  height: 236px;
  margin: 34px 0 0 40px;
  background-image: url("../../../assets/sxyrImage/银行卡背景.png");
  background-size: cover;
}

.bankName {
  display: flex;
  justify-content: space-between;
  padding: 28px 33px 49px 25px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
  line-height: 16px;
  font-style: normal;
}

.cardNumber {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 26px;
  color: #ffffff;
  line-height: 37px;
  letter-spacing: 2px;
  text-align: left;
  font-style: normal;
}

.cardAddress {
  display: flex;
  justify-content: space-between;
  padding: 52px 33px 36px 25px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 16px;
  text-align: left;
  font-style: normal;
}

.bankTable {
  margin: 21px 16px;
  border: 1px solid #e7eaec;
}

.bankPagination {
  margin: 0 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  text-align: left;
}
</style>
